import React from 'react'
import { StyleSheet, Text, ScrollView, View, FlatList, TouchableOpacity } from 'react-native'
import { SafeAreaView } from 'react-navigation'
// import { WingBlank, List } from '@ant-design/react-native'
import Slider from '@react-native-community/slider';

// const ListItem = List.Item
// const Brief = ListItem.Brief;

export default class Service extends React.PureComponent {
  static navigationOptions = {
    title: '服务'
  }

  constructor(props) {
    super(props)
    const { navigation } = props
    this.device = navigation.getParam('device')
    this.state = {
      services: [],
      power:0,
      slope:0,
      resistance:0,
      ispower:false,
      isslope:false,
      isresistance:false,
      totalN:0
    }
  }

  componentDidMount() {
    this.getServices()
  }

  getServices() {
    this.device.services()
      .then(services => {
        this.setState({
          services
        })
      })
  }

  onPressService = (service) => {
    const { navigation } = this.props
    navigation.push('Characteristic', { service })
  }
  renderItem = ({ item }) => {
    const { onPress } = this.props
    return (
      <TouchableOpacity onPress={() => this.onPressService(item)}>

        <View style={styles.item}>
          <Text style={styles.title}>{item.id}</Text>
          <Text style={styles.desc}>{item.uuid || item.deviceID}</Text>
        </View>
      </TouchableOpacity>
    )
  }
  detail=(title)=>{
        // const power = this.state.power || 1;
        // const slope = this.state.slope || 1;
        // const resistance = this.state.resistance || 1;  
        // const addition = this.state.power + this.state.slope + this.state.slope;
    // 改变状态，刷新组件
        this.setState({
          // isShow:!this.state.isShow,
          selectedId:title,
          // totalN: this.state.power + this.state.slope + this.state.slope !== 0 ? (power * slope * resistance) :0
          //这里设置的totalN，需要再次触发<TouchableOpacity onPress={()=>{this.detail(1)}} 才能刷新到
        });
        // this.setState({
        //   selectedId:title
        // });
        switch (title){
          case 1 :
            this.setState({
              ispower:!this.state.ispower
            })
            break;
          case 2:
            this.setState({
              isslope:!this.state.isslope
            })
            break;
          case 3:
            this.setState({
              isresistance:!this.state.isresistance
            })
            break;
        }
    // 子组件给父组件传点击的是哪一个分组
        // this.props.detail(title);
      }
  _total = ()=> {
      const power = this.state.power || 1;
      const slope = this.state.slope || 1;
      const resistance = this.state.resistance || 1;
      const totalN = this.state.power + this.state.slope + this.state.slope;
      this.setState({totalPower: (totalN != 0 ? (power * slope * resistance) :0)})
      // return ;
  }
  isShowPower(){
    const showpower =[];

    showpower.push(
      <View  style={{justifyContent:'center'}}>
        <View>
          <Text style={{textAlign:'center'}}>
            {this.state.power}
          </Text>
        </View>   
        <Slider
              style={{width: "100%", height: 40}}
              minimumValue={0}
              maximumValue={1000}
              minimumTrackTintColor="#e36209"
              maximumTrackTintColor="#000000"
              justifyContent="space-around"
              value={this.state.power}
              onValueChange={(value)=>{this.setState({power:value})}}
              onSlidingComplete={this._total}
              step={10}
          />
      </View>
    )
    return showpower;
  }
  isShowSlope(){
    const showslope =[];
    showslope.push(
      <View  style={{justifyContent:'center'}}>
        <View>
          <Text style={{textAlign:'center'}}>
            {this.state.slope}
          </Text>
        </View>   
        <Slider
              style={{width: "100%", height: 40}}
              minimumValue={0}
              maximumValue={16}
              value={this.state.slope}
              minimumTrackTintColor="#e36209"
              maximumTrackTintColor="#000000"
              justifyContent="space-around"
              onValueChange={(value)=>{this.setState({slope:value})}}
              onSlidingComplete={this._total}
              step={1}
          />
      </View>
    )
    return showslope;
  }
  isShowResistance(){
    const showresistance =[];
    showresistance.push(
      <View  style={{justifyContent:'center'}}>
        <View>
          <Text style={{textAlign:'center'}}>
            {this.state.resistance}
          </Text>
        </View>   
        <Slider
              style={{width: "100%", height: 40}}
              minimumValue={0}
              maximumValue={20}
              value={this.state.resistance}
              minimumTrackTintColor="#e36209"
              maximumTrackTintColor="#000000"
              justifyContent="space-around"
              onValueChange={(value)=>{this.setState({resistance:value})}}
              onSlidingComplete={this._total}
              step={1}
          />
      </View>
    )
    return showresistance;
  }
  // totaln (){
  //   const power = this.state.power || 1;
  //   const slope = this.state.slope || 1;
  //   const resistance = this.state.resistance || 1;
  //   console.log(power,'33333333333333')
  // {(this.state.power + this.state.slope + this.state.slope !== 0) ? (power * slope * resistance) :0}
    // return (power * slope * resistance);
  // }
  render() {
    const { services ,selectedId} = this.state
    const device = this.device
    // console.log(this.state.ispower,'22222222212')
    return (
      <SafeAreaView style={styles.fill}>
        <View style={{ paddingVertical: 10 }}>
          <Text style={styles.label}>设备 ID:</Text>
          <Text style={styles.value}>{device.id}</Text>
          <Text style={styles.label}>设备名称:</Text>
          <Text style={styles.value}>{device.localName || device.name || '无'}</Text>
        </View>
        <View style={styles.listHeader}>
          <Text style={styles.headerTitle}>服务列表</Text>
        </View>
        <ScrollView style={styles.fill}>
          <FlatList
            style={styles.list}
            ListEmptyComponent={() => <Text style={styles.placeholder}>暂无数据</Text>}
            data={services}
            ItemSeparatorComponent={() => <View style={styles.border} />}
            keyExtractor={(item, index) => '' + index}
            renderItem={this.renderItem}
          />
        </ScrollView>
<View>
        <Text style={{textAlign:'center'}}>设置总力量：{this.state.totalPower|| 0}
        
        </Text>
        <View >
            <View style={{marginBottom:15,backgroundColor:'white'}}>
              <TouchableOpacity onPress={()=>{this.detail(1)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 <Text>功率</Text>
                 <View style={{backgroundColor:selectedId===1 ?'red':'green',height:15,width:15}}></View>
                 <View style={{width:'75%',justifyContent:'center'}}>{selectedId!==1 ? <Text style={{textAlign:'right'}}>{this.state.power}</Text>:<Text></Text>}</View>
                 
              </TouchableOpacity>
              {this.state.ispower?<View>{this.isShowPower()}</View>:<View style={styles.border}></View>}
            </View>             
       </View>

       <View>
            <View style={{marginBottom:15,backgroundColor:'white'/*,flex:1此处设置flex则此view显示不完全，被遮挡*/}}>
              <TouchableOpacity onPress={()=>{this.detail(2)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 <Text>坡度</Text>
                 <View style={{backgroundColor:selectedId===2 ?'red':'green',height:15,width:15}}></View>
                 <View style={{width:'75%',justifyContent:'center'}}>{selectedId!==2 ? <Text style={{textAlign:'right'}}>{this.state.slope}</Text>:<Text></Text>}</View>                 
              </TouchableOpacity>
                 {this.state.isslope?<View>{this.isShowSlope()}</View>:<View style={styles.border}></View>}
            </View>             
       </View>
       <View>
            <View style={{marginBottom:15,backgroundColor:'white'}}>
              <TouchableOpacity onPress={()=>{this.detail(3)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 <Text>阻力</Text>
                 <View style={{backgroundColor:selectedId===3 ?'red':'green',height:15,width:15}}></View>
                 <View style={{width:'75%',justifyContent:'center'}}>{selectedId!==3 ? <Text style={{textAlign:'right'}}>{this.state.resistance}</Text>:<Text></Text>}</View>
              </TouchableOpacity>
                 {this.state.isresistance?<View>{this.isShowResistance()}</View>:<View style={styles.border}></View>}
            </View>             
       </View>
</View>       
      </SafeAreaView >
      
    )
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  label: {
    fontWeight: '500',
    fontSize: 16,
  },
  value: {
    marginTop: 8,
    marginBottom: 10,
    color: '#666'
  },
  listHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f9',
    padding: 15
  },
  headerTitle: {
    fontSize: 15,
    fontWeight: '500'
  },  
  list: {
    paddingTop: 15
  },
  item: {
    paddingLeft: 16,
    paddingVertical: 8
  },
  title: {
    fontSize: 16
  },
  desc: {
    color: '#666'
  },
  border: {
    backgroundColor: '#d9d9d9',
    height: 0.5
  },
  placeholder: {
    fontSize: 16,
    paddingLeft: 15,
    color: '#666'
  },
  border: {
    backgroundColor: '#d9d9d9',
    height: 0.5,
    flex: 1
  },
})